<template>
  <div
    v-loading="inOption.loading"
    class="app_page_table"
    :style="autostyle"
  >
    <!-- :row-class-name="rowClassName" @cell-mouse-leave="cellMouseLeave" @cell-mouse-enter="handleMouseEnter" -->
    <el-table
      ref="tableRef"
      border
      :highlight-current-row="singleHighLight"
      :max-height="tableHeight"
      :height="computedHeight"
      :stripe="stripe"
      :data="tableData"
      :row-key="rowKey"
      :span-method="mergeSpanMethod"
      :row-style="rowStyle"
      :row-class-name="rowClassName"
      :size="size"
      :show-summary="showSummary"
      :sum-text="sumText"
      :summary-method="summaryMethod"
      style="width: 100%"
      :cell-class-name="tableCellClassName"
      @select="select"
      @selection-change="handleSelectionChange"
      @row-dblclick="emitDblclick"
      @row-click="emitClick"
      @cell-click="cellClick"
    >
      <slot></slot>
    </el-table>
    <div
      class="page_component"
      v-show="!isPagination"
    >
      <el-pagination
        background
        style="justify-content: flex-end"
        :layout="layout"
        :total="inOption.total"
        :page-size="inOption.pageSize"
        :page-sizes="inOption.pageSizes"
        :current-page="inOption.page"
        :small="computedPaginationSize"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  reactive,
  ref,
  Ref,
  PropType,
  computed,
  toRaw,
  onMounted,
  watch,
} from "vue";
import TableOption from "./tableOption";
import useTableOption from "./useTableOption";
import { ElTable } from "element-plus";
export default defineComponent({
  props: {
    autostyle: {
      type: String,
    },
    // 控制是否显示分页 false:显示
    isPagination: {
      type: Boolean,
      default: false,
    },
    rowClassName: {
      type: Function,
      default: () => { },
    },
    spanArr: {
      type: Array,
    },
    // 控制是否进行单元格的合并操作
    mergeKey: {
      type: Number,
    },
    data: {
      type: Array,
      default: () => [],
    },
    tableHeight: {
      type: String,
    },
    height: {
      type: [Number, String],
    },
    option: {
      type: Object as PropType<TableOption>,
      default: () => {
        return useTableOption();
      },
    },
    full: {
      type: Boolean,
      default: false,
    },
    stripe: {
      type: Boolean,
      default: false,
    },
    rowKey: {
      type: String,
      default: () => "",
    },
    layout: {
      type: String,
      default: "total, sizes, prev, pager, next, jumper",
    },
    size: {
      type: String,
      default: "small",
    },
    //显示表尾合计
    showSummary: {
      type: Boolean,
      default: false,
    },
    //合计方法
    summaryMethod: {
      type: Function,
    },
    //显示表尾合计第一列的文本
    sumText: {
      type: String,
    },
    //合并逻辑
    mergeSpanMethod: {
      type: Function,
    },
    //单击表格是否高亮
    singleHighLight: {
      type: Boolean,
      default: false,
    },
  },
  name: "AppPageTable",
  emits: [
    "change",
    "update:option",
    "getList",
    "singleClick",
    "dblClick",
    "select",
    'cellClick'
  ],
  setup(prop, context) {

    const inOption: TableOption = prop.option;

    //动态高度 没有设置height的时候高度自动 有height使用height
    const computedHeight = computed(() => {
      return prop.height
        ? prop.height
        : prop.isPagination
          ? "100%"
          : "calc(100% - 34px)";
    });

    const computedPaginationSize = computed(() => {
      return prop.size == "small";
    });

    const tableRef = ref<InstanceType<typeof ElTable>>();
    const tableData = computed(() => {
      if (prop.full) {
        // 分页
        let arr = prop.data.slice(
          ((inOption.page ?? 1) - 1) * (inOption.pageSize ?? 15),
          (inOption.page ?? 1) * (inOption.pageSize ?? 15)
        );
        return arr;
      } else {
        return prop.data;
      }
    });

    // 每页数量变化
    function handleSizeChange(size: number) {
      inOption.pageSize = size;
      inOption.page = 1;
      emitChange();
    }
    // 页数变化
    function handlePageChange(page: number) {
      inOption.page = page;
      emitChange();
    }

    // 选项变化
    function handleSelectionChange(val: Array<any>) {
      const func = inOption.selectFilter
        ? inOption.selectFilter
        : (item: any) => item;
      let arr = [];
      for (let item of val) {
        let ret = func(toRaw(item));
        if (ret !== undefined) {
          arr.push(ret);
        }
      }

      inOption.selected = arr;
      emitOption();
    }
    //单条勾选
    function select(selection, row) {
      context.emit("select", { selection, row });
    }
    function resetTable() {
      inOption.page = 1;
      emitChange();
    }
    function emitOption() {
      context.emit("update:option", inOption);
    }
    function emitChange() {
      context.emit("change", toRaw(inOption));
      context.emit("getList", toRaw(inOption));
      emitOption();
    }
    //单击事件
    function emitClick(row: Object) {      
      context.emit("singleClick", row);
      // tableRef.value!.toggleRowSelection(row);
    }

    function tableCellClassName({ row, column, rowIndex, columnIndex }) {
      column.index = columnIndex;
      row.index = rowIndex;
    }

    function cellClick(row, column, cell, event) {
      context.emit("cellClick", { row, column });
    }

    function rowStyle({ row, rowIndex }) {
      let rowBackground: Object = {};

      if (prop.option.selected?.length && row.DynamicList) {
        for (let item of prop.option.selected) {
          if (item.Id == row.Id) {
            rowBackground.background = "#FFFACF";
            return rowBackground;
          }
        }
      }
      if (row.DynamicList) {
        if (rowIndex % 2 == 0) {
          rowBackground.background = "#fafafa";
          return rowBackground;
        }
      }

      // 颜色换行
      if (row.BS_OBJ_CODE) {
        if (rowIndex % 2 != 0) {
          rowBackground.background = "#F8F8F8";
          return rowBackground;
        }
      }
    }
    //双击事件
    function emitDblclick(row: Object) {
      inOption.loading = true;
      context.emit("dblClick", row);
      inOption.loading = false;
    }
    // const hoverRowLike = ref(-1)
    // // 给相同like的row添加类名
    // function rowClassName({ row, rowIndex }) {
    //   if (row.Id === hoverRowLike.value) {
    //     return 'hover-row';
    //   }
    // }
    // // 鼠标移入
    // function handleMouseEnter(row, column, cell, event) {
    //   hoverRowLike.value = row.Id
    // }
    // // 鼠标移除
    // function cellMouseLeave(row, column, cell, event) {
    //   hoverRowLike.value = -1
    // }
    // 切换全选状态
    function toggleAllSelection() {
      tableRef.value!.toggleAllSelection();
    }
    onMounted(() => {
      // 是否是所有数据都在了
      if (prop.full) {
        inOption.total = prop.data.length;
      }

      let resetProxy: any = null;
      if (prop.option.reset) {
        resetProxy = new Proxy(prop.option.reset, {
          apply(target, thisArg, argumentsList) {
            resetTable();
            return target.call(thisArg, ...argumentsList);
          },
        });
        prop.option.reset = resetProxy;
      }


    });

    return {
      inOption,
      tableData,
      handleSizeChange,
      handlePageChange,
      handleSelectionChange,
      emitDblclick,
      emitClick,
      rowStyle,
      tableRef,
      toggleAllSelection,
      computedHeight,
      computedPaginationSize,
      select,
      cellClick,
      tableCellClassName
    };
  },
});
</script>
<style lang="scss">
.app_page_table {
  width: 100%;
  display: flex;
  flex-direction: column;

  .page_component {
    text-align: right;
    margin-top: 10px;
    // 存在一个找不到的margin-bottom:10px
    margin-bottom: 0px;
  }

  .el-table {
    .el-table__inner-wrapper {
      height: 100% !important;
    }
  }
}

.hover-row {
  background-color: #909399;
}
</style>
